<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报表</title>
</head>
<body>
	部门：
	<select id="depts">
	</select>
	薪资范围：
	<input type="number" id="min" value="0" />--<input type="number" id="max" value="99999" />
	<button id="query">查询员工</button>
	<table border="1" id="empsInfo" cellspacing="0" cellpadding="0">
		<thead>
			<th>部门名称</th>
			<th>部门地址</th>
			<th>员工姓名</th>
			<th>工资</th>
		</thead>
	</table>
	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			$("#query").click(function(){
				$.ajax({
					url:"http://localhost:8080/reportDeptEmp",
					type:"post",
					data:{
						"deptno":$("#depts").val(),
						"min":$("#min").val(),
						"max":$("#max").val()
					},
					success:function(res){
						console.log(res)
					}
				})
			}),
			$.ajax({
				url:"http://localhost:8080/deptall",
				type:"get",
				success:function(res){
					var resObj = JSON.parse(res);
					var depts = resObj.data;
					for(i in depts){
						var dept = depts[i];
						$optionNode = $("<option></option>");
						$optionNode.text(dept.dname);
						$optionNode.val(dept.deptno);
						$("#depts").append($optionNode);
					}
				}
			})
		})
	</script>
</body>
</html>